import { defineComponent, render } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import IconText from "@/components/IconText";
import CardMore from "@/components/CardMore";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import icon from "@/assets/image/icon.png";
import BackgroundPlate from "@/components/BackgroundPlate";
import ExpandMore from "@/components/ExpandMore";
import RowView from "@/components/RowView";
import ColView from "@/components/ColView";
import TextView from "@/components/TextView";
import { useRouter } from "vue-router";
import { isDh } from "@/command/apiTool";
import BrandInfo from "@/components/BrandInfo";
import { toChatDetail } from "@/command/navigation";

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const { trainList, classroomList, queryExpertList, btnAction, myTeamInfo } =
      useRequest();
    return () => {
      const render3 = () => {
        return (
          <CardMore
            title="农技课堂"
            class={"mt-[10px]"}
            onMoreClick={() => router.push("/technologyClassroom")}
          >
            {classroomList.value!.slice(0, 3).map((e: any) => {
              return <IconText text={e.title} url={icon} class={["mb-4"]} />;
            })}
          </CardMore>
        );
      };
      const render4 = () => {
        return (
          <CardMore
            title="农技专家"
            class={"mt-[10px]"}
            onMoreClick={() => router.push("/listExperts")}
          >
            <div class="horizontal">
              {queryExpertList.value!.map((item: any) => {
                return (
                  <IconText
                    iconSize={85}
                    class={["icon-text-col mr-10 mt-10", style.render4]}
                    url={item.logoUrl}
                    text={item.userName}
                    foot={item.areas}
                  />
                );
              })}
            </div>
          </CardMore>
        );
      };
      const render1ListItem = (e: any) => {
        return (
          <RowView class="justify-between w-full h-[80px]">
            <ColView
              class="!justify-between"
              onClick={() => {
                router.push(`/trainingDetails?id=${e.id}`);
              }}
            >
              <TitleView title={e.title} />
              <TextView class="mt-[9px]">时间：{e.time}</TextView>
            </ColView>
            {e.status == "0" && (
              <ButtonView
                onClick={() => {
                  btnAction({
                    id: e.id,
                  });
                }}
              >
                参与
              </ButtonView>
            )}
            {e.status == "1" && <ButtonView type="default">已参与</ButtonView>}
          </RowView>
        );
      };
      const render2 = () => {
        return (
          <CardView class={"mt-[10px]"}>
            <TextView class="blue-text">
              报名线下培训会届时请准时参加并签到
            </TextView>
          </CardView>
        );
      };
      const render1 = () => {
        if (trainList.value.length === 0) return null;
        return (
          <ExpandMore>
            {trainList.value.map((e: any) => {
              return render1ListItem(e);
            })}
          </ExpandMore>
        );
      };
      const renderDhInfo = () => {
        return (
          <CardView title={"我的大户"} class={"mt-[10px]"}>
            <div class="relative flex items-center pb-[10px]">
              <BrandInfo
                text={myTeamInfo.value.entityComment}
                desc={myTeamInfo.value.address}
                type={"normal"}
                src={myTeamInfo.value.logoUrl}
                title={myTeamInfo.value.name}
                buttonTitle={"咨询大户"}
                phone={myTeamInfo.value.phone}
                onBottomClick={() => {
                  toChatDetail({
                    to: myTeamInfo.value.phone,
                    name: myTeamInfo.value.name,
                  });
                }}
              />
            </div>
          </CardView>
        );
      };
      return (
        <PageTitle title="帮授经验">
          <BackgroundPlate>
            {render1()}
            {render2()}
            {!isDh() && renderDhInfo()}
            {render3()}
            {render4()}
          </BackgroundPlate>
        </PageTitle>
      );
    };
  },
});
